

<style type="text/css">
/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget    预览图片的样式开始*/
.jcrop-holder #preview-pane {
	display: block;
	position: absolute;
	z-index: 2000;
	top: 74px;
	right: -205px;
	/*     padding: 6px; */
	/*     border: 1px rgba(0, 0, 0, .4) solid; */
	background-color: white;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
/* 	-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); */
/* 	-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); */
/* 	box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); */
}

#preview-pane .preview-container {
	width: 200px;
	height: 200px;
	border-radius:100%;
	overflow: hidden;
}
/*  预览图片的样式 */
/* 企業LOGO和選擇圖片顯示的邊框樣式---開始  */
img.double-border {
 	border: 1px solid #ddd; 
 	background: #fff;
}

a {
	text-decoration: none;
}
</style>
<style type="text/css">
.a-upload {
	padding: 2px 10px;
	width: 100px;
	height: 45px;
	line-height: 45px;
	position: relative;
	cursor: pointer;
	color: white;
	background: #84C1FF;
	border: 1px solid #F0F0F0;
	border-radius: 4px;
	overflow: hidden;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

.a-upload  input {
	position: absolute;
	font-size: 130px;
	right: 0;
	top: 0;
	opacity: 0;
	filter: alpha(opacity = 0);
	cursor: pointer;
}

.file:hover {
	background: #AADFFD;
	color: white;
	text-decoration: none;
}

.a-upload:hover {
	text-decoration: none;
	color: white;
	background: #66B3FF;
}
</style>
<script type="text/javascript">
//定义一个全局api，这样操作起来比较灵活
var jcrop_api;
var boundx;
var boundy;

var markHtml = "";

var contactsImageFlag="musicPic";
var defaultImg = "static/img/defaultImg/defaultSquareImg.png";
var upload = 'http://'+window.location.hostname+':'+window.location.port;

var widthImp=200;
var heightImp=200;


$(function(){
	$("#contactsImageFlag").val(contactsImageFlag);
// 	$("#heightImp").val(heightImp);
// 	$("#widthImp").val(widthImp);
	//初始化赋值
	markHtml = $("#markHtml").html();
    var bigImageSrc=   defaultImg;
	$('#oldImageSrc').val(bigImageSrc);
	$('#bigImage').removeAttr('src');
	$('#bigImage').attr('src', bigImageSrc);
   	$('#cutimgPreview').removeAttr('src');
   	$('#cutimgPreview').attr('src', bigImageSrc);
    $("#formImg").submit(function(){   
        $(this).ajaxSubmit(options);   
        return false;   //防止表单自动提交  
    }); 
});


function Wa_SetImgAutoSize(obj) {
	  //var img=document.all.img1;//获取图片
    var image = obj;
    var MaxWidth = 320; //设置图片宽度界限
    var MaxHeight = 320; //设置图片高度界限
//     var HeightWidth = img.height / img.width; //设置高宽比
//     var WidthHeight = img.width / img.height; //设置宽高比
    var width = image.width;  
    var height = image.height;  
     var HeightWidth = height / width; //设置高宽比
     var WidthHeight = width / height; //设置宽高比
       

        $("#imgWidth").val(width);
        $("#imgHight").val(height);

    var sum=0;
    if (width > MaxWidth&& sum==0 ) {
    	if(height<width){
    		
    	width = MaxWidth;
    	height = MaxWidth * HeightWidth;
    	sum=1;
    	}else{
    	height = MaxHeight;
        width = MaxHeight * WidthHeight;
        sum=1;
    	}
    }
    if(sum==0 && height > MaxHeight) {
    	if(height>width){
    	height = MaxHeight;
        width = MaxHeight * WidthHeight;
        sum=1;
    	}else{
    	width = MaxWidth;
        height = MaxWidth * HeightWidth;
        sum=1;	
    	}
    }
    if (sum==0 && width < MaxWidth) {
    	if(height<width){
    	width = MaxWidth;
    	height = MaxWidth * HeightWidth;
    	sum=1;
    	}else{
    		height = MaxHeight;
        	width = MaxHeight * WidthHeight;
        	sum=1
    	}
    }
    if(sum==0 && height < MaxHeight) {
    	if(height>width){
    	height = MaxHeight;
    	width = MaxHeight * WidthHeight;
    	sum=1;
    	}else{
    		width = MaxWidth;
        	height = MaxWidth * HeightWidth;
        	sum=1;	
    	}
    }
    $("#bigImage").width(width);
    $("#bigImage").height(height);
    $("#result").width(width);
    $("#result").height(height);  
}

function readURL(input) {
	//判断类型图片
	var myImg_leixing="jpg,jpeg,png,bmp";
	var myImg = $("#imgFile").val();
	myImg_name = myImg.substring(myImg.lastIndexOf('\\')+1,myImg.length);
	var myImg_some = myImg.substring(myImg.lastIndexOf('.')+1,myImg.length);
	var myImg_leixing1=myImg_leixing.split(",");
	var count1=0;
	for (var i = 0; i < myImg_leixing1.length; i++) {
		if(myImg_leixing1[i].indexOf(myImg_some) == -1){
			count1++;
		 }
	}
	if(count1==4){
		globalUtil.showSuccessMessage('上传图片格式错误');
		return false;
	}
	 
    $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(), ysize = $pcnt.height();
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.readAsDataURL(input.files[0]);

        reader.onload = function(e) {
        	
        	var data = e.target.result;  
            //加载图片获取图片真实宽度和高度  
            var image = new Image();  
            image.onload=function(){ 
                var width = image.width;  
                var height = image.height;  

                $("#imgWidth").val(width);
                $("#imgHight").val(height);

                var MaxWidth = 320; //设置图片宽度界限
                var MaxHeight = 320; //设置图片高度界限
                var HeightWidth = height / width; //设置高宽比
                var WidthHeight = width / height; //设置宽高比
                var sum=0;
                if (width > MaxWidth&& sum==0 ) {
                	if(height<width){
                		
                	width = MaxWidth;
                	height = MaxWidth * HeightWidth;
                	sum=1;
                	}else{
                	height = MaxHeight;
                    width = MaxHeight * WidthHeight;
                    sum=1;
                	}
                }
                if(sum==0 && height > MaxHeight) {
                	if(height>width){
                	height = MaxHeight;
                    width = MaxHeight * WidthHeight;
                    sum=1;
                	}else{
                	width = MaxWidth;
                    height = MaxWidth * HeightWidth;
                    sum=1;	
                	}
                }
                if (sum==0 && width < MaxWidth) {
                	if(height<width){
                	width = MaxWidth;
                	height = MaxWidth * HeightWidth;
                	sum=1;
                	}else{
                		height = MaxHeight;
                    	width = MaxHeight * WidthHeight;
                    	sum=1
                	}
                }
                if(sum==0 && height < MaxHeight) {
                	if(height>width){
                	height = MaxHeight;
                	width = MaxHeight * WidthHeight;
                	sum=1;
                	}else{
                		width = MaxWidth;
                    	height = MaxWidth * HeightWidth;
                    	sum=1;	
                	}
                } 
                
                $("#markHtml").html(markHtml);
                $("#bigImage").width(width);
                $("#bigImage").height(height);
                $("#result").width(width);
                $("#result").height(height);  
//                 $("#imgWidth").val($("#result").width());
//                 $("#imgHight").val($("#result").height());
                
                $('#result').Jcrop({
                    onChange : updatePreview,
                    onSelect : updatePreview,
                    aspectRatio: widthImp/heightImp,
                    setSelect: [ 0, 0, width, height ]
                }, function() {
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                    jcrop_api = this;
                    $preview.appendTo(jcrop_api.ui.holder);
                });
                
                $('#result').Jcrop({
                    onChange : updatePreview,
                    onSelect : updatePreview,
                    aspectRatio: widthImp/heightImp,
                    setSelect: [ 0, 0, width, height ]
                });
                $('#bigImage').removeAttr('src');
                $('#bigImage').attr('src', e.target.result);
    			$('#cutimgPreview').removeAttr('src');
                $('#cutimgPreview').attr('src', e.target.result);
            };
            image.src= data; 
        }
    }
}
	function updatePreview(c) {
	    $("#x").val(c.x);
	    $("#y").val(c.y);
	    $("#w").val(c.w);
	    $("#h").val(c.h);
	
	    if (parseInt(c.w) > 0) {
	        var rx = xsize / c.w;
	        var ry = ysize / c.h;
	
	        $pimg.css({
	            width : Math.round(rx * boundx) + 'px',
	            height : Math.round(ry * boundy) + 'px',
	            marginLeft : '-' + Math.round(rx * c.x) + 'px',
	            marginTop : '-' + Math.round(ry * c.y) + 'px'
	        });
	    }
	
	}


function addImgs(){
	//添加图片  提交表单
	if($("#bigImage").attr("src")!=defaultImg){
		$("#formImg").submit();
		$("body").startLoading();
	}
} 

var options = {   
        type: 'POST',  
        url: global_param.context_name+'/personnelManage/uploadHeadImage.do',  
        success: showResponse,    
        dataType: 'json',  
        error : function(xhr, status, err) {              
        }  
    }; 
// 表单提交
function showResponse(responseText, statusText, xhr, $form){
	if("success"==responseText.results){
	 //调用图片刷新方法
	 deleteImgForSuccess();
	 $('#pic_path').attr('src', global_param.context_name + responseText.saveUrl);
     $('#sys_img_path').val(responseText.saveUrl);
     $("body").stopLoading();
     dialog_a.close();
	}
}


function deleteImgForSuccess(){
	//删除当前页面图片
    $.ajax({
        type: "POST",
        url: global_param.context_name + "/personnelManage/deleteImg.do",
        data:{
            "oldFileName": $('#sys_img_path').val(),
            "defaultImg":defaultImg
        },
        async: false,
        success: function(json) {
        }
    });  
    $('#pic_path').attr('src',defaultImg);
    $('#sys_img_path').val('');
    
}

</script>
	<form name="formImg" id="formImg" method="post" autocomplete="off"
		enctype="MULTIPART/FORM-DATA">
		<div style="padding-left: 60px; width: 590px; height: 70px; float: left;">
			调整照片<br>
			<div style="width: 320px; height: 70px;">
				<font size="2">拖拽方框，调整照片合适的位置和尺寸</font><br> <font size="2"
					color="gray">(支持格式：JPG、JPEG、PNG、BMP)</font>
			</div>
		</div>
		<div style="width: 100px;padding-left: 60px; float: left;">
			<div style="padding-top: 13px;">
				<a href="javascript:;" class="a-upload"> <input
					class="photo-file" type="file" name="imgFile" id="imgFile"
					onchange="readURL(this);"><span style="margin-left: 15px;">选择图片</span>
				</a>
			</div>
		</div>
		<div id="markHtml" style="padding-left: 60px; width: 590px; height: 240px; float: left;">
			<div id="result">
				<img id="bigImage" class="double-border" onload="Wa_SetImgAutoSize(this)"/> 
				<input id="oldImageSrc"	name="oldImageSrc" type="hidden" />
			</div>
		</div>
		<div style="padding-left: 60px; width: 160px; float: left;">
			<div style="padding-top: 50px;">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;照片预览
				<div id="preview-pane" style="margin-top: 3px; margin-left: -43px; left: 590px; width: 200px; height: 200px;">
					<div class="preview-container">
						<img id="cutimgPreview" src="" class="jcrop-preview" style="width: 200px; height: 200px;" /> 
					</div>
				</div>
			</div>
		</div>
							<input type="hidden" id="x" name="x" /> 
							<input type="hidden" id="y" name="y" /> 
							<input type="hidden" id="w" name="w" /> 
							<input type="hidden" id="h"	name="h" />
							<input type="hidden" id="imgWidth" name="imgWidth" /> 
							<input type="hidden" id="imgHight"	name="imgHight" />
							<input type="hidden" id="contactsImageFlag"	name="contactsImageFlag" />
	</form>
	<img id="uploadImgWidHgt" src="" type="hidden"/>
